import { DirectiveBinding, ObjectDirective } from 'vue'

import { usePermissionStore } from '@/stores/permission' // 假设你已经有一个权限 store

const permission: ObjectDirective = {
  // 当指令绑定到元素时调用
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const permissionStore = usePermissionStore() // 获取权限 store
    const requiredPermission: string = binding.value // 获取指令传入的权限值

    // 判断用户是否具有该权限
    if (!permissionStore.hasPermission(requiredPermission)) {
      el.style.display = 'none' // 如果没有权限，隐藏元素
    }
  },

  // 如果绑定的权限发生变化时调用
  updated(el: HTMLElement, binding: DirectiveBinding) {
    const permissionStore = usePermissionStore()
    const requiredPermission: string = binding.value

    if (!permissionStore.hasPermission(requiredPermission)) {
      el.style.display = 'none' // 如果没有权限，隐藏元素
    } else {
      el.style.display = '' // 如果有权限，恢复显示
    }
  },
}

export { permission }
